<template>
	<!-- 产品/企业 公用tab -->
	<view class="home container">
		<view class="cont_tab mb-1 flex justify-around">
			<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont">
				<view class="tab_item font_24 mr-3" :class="{ cont_tab_active: tabCur == -1 }" @click="tabAll" v-if="allShow">
					全部
					<text class="font_24" v-if="countNum[0] >= 1">({{ countNum[0] }})</text>
				</view>
				<view
					class="tab_item font_24 mr-3 flex"
					v-for="(item, index) of tabList"
					:key="item.id"
					:class="{ cont_tab_active: tabCur == index }"
					@click="contTabChange(index, item)"
				>
					<text>{{ item.title }}</text>
					<view v-for="(num, numIdx) of countNum" :key="numIdx" class="d-inline-block">
						<text class="font_24" v-if="countNum.length >= 1 && numIdx - 1 == index">({{ num }})</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		tabList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		allShow: {
			type: Boolean,
			default: true
		},
		countNum: {
			type: Array,
			default: function() {
				return [];
			}
		},
		// 是否切换到全部
		reset: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			tabCur: -1
		};
	},
	// watch: {
	// 	tabList: {
	// 		handler(newV, oldV) {
	// 			if (newV !== oldV) {
	// 				if (this.reset) {
	// 					this.tabAll();
	// 				}
	// 			}
	// 		},
	// 		deep: true,
	// 		immediate: true
	// 	}
	// },
	mounted() {
		this.tabCur = this.allShow ? -1 : 0;
	},
	methods: {
		tabAll() {
			this.tabCur = -1;
			this.$emit('tabAll');
		},
		contTabChange(idx, val) {
			this.tabCur = idx;
			let msg = {
				idx: idx,
				val: val
			};
			this.$emit('contTabChange', msg);
		}
	}
};
</script>

<style lang="scss" scoped>
.home {
	// background-color: $color0;
	background-color: $color2;
}

.cont_tab {
	padding-top: 20rpx;

	.tab_item {
		display: inline-block;
		height: 60rpx;
	}

	.cont_tab_active {
		color: $color14;
		font-size: 36rpx;
		font-weight: 700;
		border-bottom: 3px solid $color14;
		transition: color 0.2s;
	}

	.scroll_cont {
		white-space: nowrap;
		width: 100%;
	}
}

// .cont_tab {
// 	.tab_item {
// 		display: inline-block;
// 		background-color: $color2; // #d3d3d3;
// 		padding: 5rpx 15rpx;
// 		border-radius: 14rpx;
// 	}

// 	.cont_tab_active {
// 		background-color: $color14;
// 		color: $color2;
// 	}
// 	.scroll_cont {
// 		white-space: nowrap;
// 		width: 100%;
// 	}
// }
</style>
